<template>
    <div class="body-box">
        <van-nav-bar title="设置" left-arrow @click-left="onClickLeft" />
        <van-cell-group title="信息完善" :inset="true">
            <van-cell title="手机号" is-link value="未绑定" @click="phoneEdit()"></van-cell>
            <van-cell title="邮箱" is-link value="未绑定" @click="mailEdit()"></van-cell>
        </van-cell-group>
        <van-cell-group title="个人职业资质、机构、企业认证" :inset="true">
            <van-cell title="官方认证" is-link value="未认证" @click="officeConfirm()"></van-cell>
        </van-cell-group>
        <van-cell-group title="个性化服务" :inset="true">
            <van-cell title="暗黑模式">
                <template #value>
                    <van-switch v-model="isDarkTheme" @click="changeDarkTheme()" active-color="#1989fa"
                        inactive-color="#dcdee0" size="16" />
                </template>
            </van-cell>
            <van-cell title="个性推荐">
                <template #value>
                    <van-switch v-model="isOpenRecommand" @click="changeRecommand()" active-color="#1989fa"
                        inactive-color="#dcdee0" size="16" />
                </template>
            </van-cell>
        </van-cell-group>
        <van-cell-group title="反馈与改进" is-link :inset="true">
            <van-cell title="意见反馈" @click="navToPage('/suggest')" is-link></van-cell>
        </van-cell-group>
        <van-cell-group title="账号管理" is-link :inset="true" v-if="token != null">
            <!-- <van-cell title="注销账号" @click="logOut()" is-link></van-cell> -->
            <van-cell title="退出登录" @click="logOut()" is-link></van-cell>
        </van-cell-group>
    </div>
</template>
<script setup>
import { showNotify, showToast } from "vant";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
let isDarkTheme = ref(false);
let isOpenRecommand = ref(true);
const token = localStorage.getItem("token");
function officeConfirm() {
    showToast("官方认证即将开放~");
}
function phoneEdit() {
    showToast("经费不足，暂未开放~");
}
function mailEdit() {
    showToast("邮箱绑定即将开放~~");
}
function changeDarkTheme() {
    isDarkTheme.value = !isDarkTheme.value;
    showToast("暂不支持主题切换~");
}

function changeRecommand() {
    // isOpenRecommand.value = !isOpenRecommand.value;
    // showToast("暂不支持主题切换~")
    if (!isOpenRecommand.value) {
        showToast("已关闭个性化推荐~");
    } else {
        showToast("推荐开启成功~");
    }
}
function onClickLeft() {
    router.back();
}
function navToPage(route) {
    router.push({
        path: route
    })
}
function logOut() {
    localStorage.clear("token");
    localStorage.setItem("showLoginToast", true);
    showNotify({ type: 'success', message: '已退出登录~' });
    router.back();
}
</script>
<style>
.body-box {
    background-color: #fafafa;
    overflow: scroll;
}

.van-cell-group__title {
    text-align: left;
    font-size: 12px;
}

.van-cell__title {
    display: flex;
    align-items: center;
}

.van-cell__value {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
</style>